<template>
  <div style="width:100%">
    <div style="height: 28px;">
      <span class="fl" style="font-weight: 700;">{{ title }}</span>
      <el-button type="text" class="fr" @click="changeNext"> {{ buttonText }}</el-button>
    </div>
    <div v-for="(item, index) in currentPageData" :key="index"
      style="border: 1px solid #00000026;background: #fff;line-height: 37px;margin-bottom: 20px"
      @click="clickCard(item)">
      <div style="padding: 0 10px 20px;">
        <div style="height: 25px;">
          <span class="fl" style="font-size: 16px; font-weight: 700;">{{ item.title }}</span>
        </div>
        <div style="overflow: hidden; text-overflow: ellipsis;white-space: wrap;word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;line-height: 15px; width: 100%; padding-right: 20px;">
          {{ item.desc }}
        </div>
        <div style="height: 28px;font-size: 12px;">
          <span class="fl" style="color: #EC808D;font-size: 20px; font-weight: 700;margin-right: 15px;">{{ item.price }}万</span>
          <el-divider direction="vertical"></el-divider>
          <span style="margin-left: 5px;">{{ item.company }}</span>
        </div>
        <div style="padding-top: 10px;">
          <div style="display:inline-block;border:1px solid #797979;border-radius: 3px;padding: 0 15px;margin-right: 10px;line-height: 28px;color: #797979;">{{ item.tag1 }}</div>
          <div style="display:inline-block;border:1px solid #797979;border-radius: 3px;padding: 0 15px;margin-right: 10px;line-height: 28px;color: #797979;">{{ item.tag2 }}</div>
        </div>
      </div>  
    </div>
  </div>
</template>
<script>
import routerContextPath from '../../mixins/router-context-path.js'
export default {
  name: 'proDetail',
  mixins: [routerContextPath],
  props: {
    value: '',
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    buttonText: {
      type: String,
      default: '换一换'
    },
    title: {
      type: String,
      default: '同类产品推荐'
    },
    // 
    cardList: {
      type: Object,
      dafault: () => []
    }
  },
  computed: {
    isDesigner(){
      return this.$attrs._source === 'designer'
    },
    mixEditable() {
      return !(this.$attrs.readonly || this.$attrs.disabled) && this.mode === "edit"
    },
    
    currentPageData() {
      if (this.isDesigner) {
        return this.demolist
      } else {
        return this.cardList
      }
    },
    
  },
  data() {
    return {
      demolist: [{
        title: '轻流',
        browseNum: 1000,
        desc: '通过使用一体化低代码平台Mendix提炼和自动化开发过程,更快构建更好企业威尔而威尔东风浩荡贵航股份很符合发哈',
        price: 500,
        company: '讯飞智元科技有限公司',
        tag1: '数字化管理',
        tag2: '技术服务'
      },{
        title: '轻流',
        browseNum: 1000,
        desc: '通过使用一体化低代码平台Mendix提炼和自动化开发过程,更快构建更好企业威尔而威尔东风浩荡贵航股份很符合发哈',
        price: 500,
        company: '讯飞智元科技有限公司',
        tag1: '数字化管理',
        tag2: '技术服务'
      },{
        title: '轻流',
        browseNum: 1000,
        desc: '通过使用一体化低代码平台Mendix提炼和自动化开发过程,更快构建更好企业威尔而威尔东风浩荡贵航股份很符合发哈',
        price: 500,
        company: '讯飞智元科技有限公司',
        tag1: '数字化管理',
        tag2: '技术服务'
      },{
        title: '轻流',
        browseNum: 1000,
        desc: '通过使用一体化低代码平台Mendix提炼和自动化开发过程,更快构建更好企业威尔而威尔东风浩荡贵航股份很符合发哈',
        price: 500,
        company: '讯飞智元科技有限公司',
        tag1: '数字化管理',
        tag2: '技术服务'
      }],
     
    }
  },
  created(){
  },
  watch: {
    
  },
  methods: {
    changeNext() {
      this.$emit('changeList')
    },
    openDoc() {
      window.open(`${this.contextPath}/index.html#/components_store/preview?groupCode=tang&code=post`)
    },
    clickCard(item) {
      this.$emit('clickCard', item)
    }
  }
}
</script>
<style lang="scss" scoped>
  
</style>